import RcPagination, { PaginationProps } from 'rc-pagination'

function PrevIcon() {
  return (
    <svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg>
  )
}

function NextIcon() {
  return (
    <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg>
  )
}

export function Pagination(props: IPaginationProps) {

  const pageRender = (page: number, type: string, element: React.ReactNode) => {
    if (type == 'page') {
      return <a href={'?page=' + page}>{page}</a>
    }
    if (type == 'jump-prev' || type == 'jump-next') {
      return <a href={'?page=' + page}>···</a>
    }
    if (type == 'prev') {
      return <a href={'?page=' + page}><PrevIcon /></a>
    }
    if (type == 'next') {
      return <a href={'?page=' + page}><NextIcon /></a>
    }
    return <></>
  }

  return (
    <RcPagination {...props} itemRender={pageRender} />
  )
}

export interface IPaginationProps extends PaginationProps {
}